/**
 * @file DataOverviewCards.vue
 * @description 数据概览卡片组件，用于显示教学相关的关键指标
 * @created 2024-07-12
 */

<template>
  <div class="overview-cards">
    <div v-for="card in cardsData" :key="card.id" class="overview-card">
      <div class="card-icon" :style="{ backgroundColor: card.color }">{{ card.icon }}</div>
      <div class="card-content">
        <h3>{{ card.title }}</h3>
        <div class="card-value">{{ card.value }}</div>
        <div class="card-trend" :class="card.trend">
          <span>{{ card.trend === 'up' ? '↑' : '↓' }}</span>
          {{ card.change }}% 与上期相比
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 组件属性定义
const props = defineProps({
  // 外部传入的卡片数据，如果没有提供则使用默认数据
  cards: {
    type: Array,
    default: () => []
  },
  // 是否自动加载数据
  autoLoad: {
    type: Boolean,
    default: true
  },
  // 时间范围
  timeRange: {
    type: String,
    default: 'semester'
  },
  // 数据加载API
  loadApi: {
    type: Function,
    default: null
  }
})

// 卡片数据，如果外部没有提供则使用默认数据
const cardsData = ref(props.cards.length > 0 ? props.cards : [
  {
    id: 1,
    title: '教学资源利用率',
    value: '78.5%',
    change: 5.2,
    trend: 'up',
    icon: '📚',
    color: '#1890ff'
  },
  {
    id: 2,
    title: '平均教学质量评分',
    value: '4.6/5',
    change: 0.3,
    trend: 'up',
    icon: '⭐',
    color: '#52c41a'
  },
  {
    id: 3,
    title: '学生参与度',
    value: '82%',
    change: 3.7,
    trend: 'up',
    icon: '👥',
    color: '#722ed1'
  },
  {
    id: 4,
    title: '教学资源缺口',
    value: '8%',
    change: 2.1,
    trend: 'down',
    icon: '📊',
    color: '#faad14'
  }
])

// 加载状态
const loading = ref(false)

// 加载数据的方法
const loadData = async () => {
  // 如果没有提供加载API，则使用默认数据
  if (!props.loadApi) return
  
  try {
    loading.value = true
    const response = await props.loadApi({ timeRange: props.timeRange })
    
    if (response && response.status === 'success' && response.data) {
      // 更新卡片数据
      cardsData.value = response.data.map(item => ({
        id: item.id,
        title: item.title,
        value: item.value,
        change: item.change,
        trend: item.trend,
        icon: item.icon,
        color: item.color
      }))
    } else {
      console.warn('获取概览数据返回格式不正确:', response)
    }
  } catch (error) {
    console.error('获取概览数据失败:', error)
    ElMessage.warning('概览数据加载失败，显示默认数据')
  } finally {
    loading.value = false
  }
}

// 暴露刷新数据方法给父组件
defineExpose({
  refreshData: loadData
})

// 监听时间范围变化，重新加载数据
watch(() => props.timeRange, () => {
  if (props.autoLoad) {
    loadData()
  }
})

// 组件挂载时，如果设置了自动加载则加载数据
onMounted(() => {
  if (props.autoLoad && props.loadApi) {
    loadData()
  }
})
</script>

<style scoped>
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.overview-card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-right: 16px;
  transition: all 0.3s ease;
}

.card-content {
  flex: 1;
}

.card-content h3 {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-trend.up {
  color: #67c23a;
}

.card-trend.down {
  color: #f56c6c;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .overview-cards {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .card-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .overview-cards {
    grid-template-columns: 1fr;
  }
}
</style> 